<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" width="800px" :close-on-click-modal="false" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<el-form-item label="产品名称" prop="product_name">
						<el-input v-model="form.product_name" placeholder="请输入产品名称" :disabled="num == 3" clearable></el-input>
					</el-form-item>
					<el-form-item label="MODEL" prop="model">
						<el-input v-model="form.model" placeholder="请输入MODEL" :disabled="num == 3" clearable></el-input>
					</el-form-item>
					<el-form-item label="服务项目" prop="service_name">
						<el-input v-model="form.service_name" placeholder="请输入服务项目" :disabled="num == 3" clearable></el-input>
					</el-form-item>
					<el-form-item label="服务内容">
						<el-input v-model="form.service_content" placeholder="请输入服务内容" :disabled="num == 3" clearable></el-input>
					</el-form-item>
					<el-form-item label="时长">
						<el-input type="number" :step="0.1" v-model="form.hour_count" clearable placeholder="请输入时长"
								  @change="hourChange" :disabled="num == 3" :min="0" clearable></el-input>
					</el-form-item>
					<el-form-item label="每小时单价">
						<el-input type="number" v-model="form.unit_price" clearable placeholder="请输入每小时单价"
								  @change="priceChange" :disabled="num == 3" :min="0" clearable></el-input>
					</el-form-item>
					<el-form-item label="价格" prop="price">
						<el-input v-model="price" clearable placeholder="请输入价格" :disabled="num == 3 || btnShow" clearable></el-input>
					</el-form-item>
					<el-form-item label="描述/备注">
						<el-input type="textarea" v-model="form.remark" placeholder="请输入描述/备注" :rows="5" :disabled="num == 3" clearable></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')" v-if="num != 3">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { quotationService, quotationServiceId } from '@/api/user'
export default {
	name: 'addForm',

	data(){
		return {
			btnShow:false,
			dialogFormVisible:false,
			form:{
				product_name:'',
				model:''
			},
			price:'',
			id:'',
			rules:{
				product_name: [
					{ required: true, message: '请输入产品名称', trigger: 'blur' }
				],
				model: [
					{ required: true, message: '请输入产品型号', trigger: 'change' }
				],
				service_name:{ required: true, message: '请输入服务项目', trigger: 'change' },
				price:{ required: true, message: '请输入价格', trigger: 'blur' },
			},
			options:[],
			num:0,
			title:'添加',
			content:{}
		}
	},
	created() {

	},
	methods:{
		priceChange(){
			this.btnShow = true
			if(this.form.hour_count != undefined && this.form.unit_price != undefined){
				this.price =(this.form.hour_count*this.form.unit_price).toFixed(2)
			}
			if(this.form.hour_count == '' && this.form.unit_price == ''){
				this.btnShow = false
				this.price = ''
			}
		},
		hourChange(){
			this.btnShow = true
			if(this.form.hour_count != undefined && this.form.unit_price != undefined){
				this.price =(this.form.hour_count*this.form.unit_price).toFixed(2)
			}
			if(this.form.hour_count == '' && this.form.unit_price == ''){
				this.btnShow = false
				this.price = ''
			}
		},
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
			this.btnShow = false
			this.price = ''
		},
		add(form){
			this.form.quotation_id = this.id
			if(this.num == 1 || this.num == 4){
				if(this.price != ''){
					this.rules.price['required'] = false
				}
				this.$refs[form].validate((valid) => {
					this.btnShow = false
					this.form.price = this.price
					var data = {
						quotation_id:this.id,
						product_name:this.form.product_name,
						model:this.form.model,
						service_name:this.form.service_name,
						service_content:this.form.service_content,
						hour_count:this.form.hour_count,
						unit_price:this.form.unit_price,
						price:this.price,
						remark:this.form.remark
					}

					if (valid) {
						quotationService(data).then(res => {
							if(res.status == 'success'){
								this.$message.success(res.message)
								this.dialogFormVisible = false
								this.$parent.serviceList(this.id)
								this.$parent.initData(this.id)
							}else {
								this.$message.error(res.message)
								this.dialogFormVisible = false
							}
							this.form = {}
							this.price = ''
							this.rules.price['required'] = true
						})
					} else {
						return false;
					}
				});
			}
			if(this.num == 2){
				this.$refs[form].validate((valid) => {
					if (valid) {
						this.btnShow = false
						this.form.price = this.price
						quotationServiceId(this.form,this.content.id).then(res => {
							if(res.status == 'success'){
								this.$message.success(res.message)
								this.dialogFormVisible = false
								this.$parent.serviceList(this.id)
								this.$parent.initData(this.id)
								this.form = {}
								this.price = ''
							}else {
								this.$message.error(res.message)
								this.dialogFormVisible = false
							}
						})
					} else {
						return false;
					}
				});
			}


		},
		initData(num,data,formData){
			this.num = num

			if(num != 1){
				this.id = data
			}else {
				this.id = data.id
			}
			this.form.product_name = data.product_name
			this.form.model = data.model
			this.content = formData
			if(num != 1){
				this.form = Object.assign({},formData)
				this.price = this.form.price
			}
			if(num == 1){
				this.title='添加'
			}
			if(num == 2){
				this.title = '编辑'
				if(this.form.price != '' && this.form.hour_count != '' && this.form.unit_price != ''){
					this.btnShow = true
				}
			}
			if(num == 3){
				this.title = '查看'
			}
			if(num == 4){
				this.title = '复制'
				if(this.form.price != '' && this.form.hour_count != '' && this.form.unit_price != ''){
					this.btnShow = true
				}
			}
		}
	}

}
</script>

<style lang="scss" scoped>
.role{
	//.tab{
	//	width: 450px;
	//	margin: 0 0 0 40px;
	//}
}
</style>
